<template>
  <div class="departments">
    <!-- 卡片容器 -->
    <el-card class="mycard">
      <!-- tabs 标签页 -->
      <el-tabs v-model="activeName">
        <el-tab-pane class="mypane" label="组织结构" name="first">
          <!-- 设置头部 -->
          <treetools
            @opendialog="openAdd"
            @updatedata="getAllList"
            :data="headData"
            :isRoot="true"
          ></treetools>
          <hr />
          <!-- scoped-slot 自定义tree的节点内容 -->
          <el-tree :data="list" default-expand-all>
            <treetools
              slot-scope="{ data }"
              :data="data"
              @updatedata="getAllList"
              @opendialog="openAdd"
            ></treetools>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增组件弹框 -->
    <adddept
      ref="mydialog"
      :showDialog.sync="showDialog"
      :currentData="currentData"
      :type="type"
      @closedialog="showDialog = false"
      @updatedata="getAllList"
    ></adddept>
  </div>
</template>
​
<script>
import { companyDepartmentsApi } from "@/api/departments";
export default {
  components: {
    treetools: () => import("./components/treetools.vue"),
    adddept: () => import("./components/add-dept.vue")
  },
  data() {
    return {
      // 头部结构的数据源
      headData: {},
      // 当前选中tabs
      activeName: "first",
      // 树形结构的数据源
      list: [],
      // 新增部门对话框是否显示
      showDialog: false,
      // 点击添加对应项的数据源
      currentData: {},
      // 对话框的类型 修改/添加
      type: ""
    };
  },
  created() {
    // 打开页面
    // 得到组织架构数据
    this.getAllList();
  },
  methods: {
    async getAllList() {
      const res = await companyDepartmentsApi();
      // 把res.depts存到vuex中
      this.$store.commit("departments/saveDepts", res.depts);

      this.headData = { ...res.depts[0], manager: "负责人" }; //头部数据

      // 将数据源转成树状结构
      this.list = this.trunData(res.depts, "");
    },
    // 用递归将数据源转为树状结构
    trunData(arr, pid) {
      let res = [];
      arr.forEach(item => {
        if (item.pid == pid) {
          let children = this.trunData(arr, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          res.push(item);
        }
      });
      return res;
    },

    openAdd(item) {
      // 子组件事件传参
      // 打开对话框
      this.showDialog = true;
      // data: 当前点击"添加子部门"按钮对应的数据源
      this.currentData = item.data;
      this.type = item.type;
      if (item.type == "edit") {
        // 表示是编辑功能
        // 把拿到的每一项的数据传递给dialog中的form中
        this.$refs.mydialog.form = { ...this.currentData }; // 这里不能直接用等于赋值，data是个复杂数据类型，需要用到深拷贝 不然会影响原对象
      }
    }
  }
};
</script>
​
<style lang="scss">
.departments {
  padding: 20px;
  .mycard {
    padding: 20px;
    .mypane {
      padding: 40px 120px;
    }
  }
}
</style>
